<template>
  <div class="product-detail-page">
    <!-- 商品基本信息 -->
    <div
      class="product-header bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700"
    >
      <div class="container mx-auto px-4 py-8">
        <div class="flex flex-col lg:flex-row gap-8">
          <!-- 左侧图片展示 -->
          <div class="lg:w-1/2">
            <!-- 主图 -->
            <div class="main-image mb-4">
              <el-image
                :src="product.images[activeImageIndex]"
                :preview-src-list="product.images"
                class="w-full aspect-square rounded-lg"
                fit="cover"
              />
            </div>
            <!-- 缩略图列表 -->
            <div class="thumbnail-list flex gap-2">
              <div
                v-for="(image, index) in product.images"
                :key="index"
                class="thumbnail-item w-20 h-20 rounded-lg overflow-hidden cursor-pointer"
                :class="{
                  'ring-2 ring-primary-500': index === activeImageIndex,
                }"
                @click="activeImageIndex = index"
              >
                <el-image :src="image" class="w-full h-full" fit="cover" />
              </div>
            </div>
          </div>

          <!-- 右侧信息 -->
          <div class="lg:w-1/2">
            <div class="flex items-center justify-between mb-4">
              <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100">
                {{ product.name }}
              </h1>
              <el-button
                circle
                :type="product.isFavorite ? 'danger' : 'default'"
                @click="handleToggleFavorite"
              >
                <el-icon>
                  <Star :filled="product.isFavorite" />
                </el-icon>
              </el-button>
            </div>

            <!-- 价格信息 -->
            <div
              class="price-info bg-primary-50 dark:bg-primary-900/20 rounded-lg p-6 mb-6"
            >
              <div class="flex items-baseline gap-2">
                <span
                  class="text-3xl text-primary-600 font-bold dark:text-primary-400"
                >
                  ¥{{ selectedSku ? selectedSku.price : product.price }}
                </span>
                <span
                  v-if="
                    selectedSku
                      ? selectedSku.originalPrice
                      : product.originalPrice
                  "
                  class="text-gray-400 line-through dark:text-gray-500"
                >
                  ¥{{
                    selectedSku
                      ? selectedSku.originalPrice
                      : product.originalPrice
                  }}
                </span>
                <span
                  v-if="product.discount"
                  class="bg-red-500 text-white text-sm px-2 py-0.5 rounded"
                >
                  {{ product.discount }}折
                </span>
              </div>
              <div
                class="flex items-center flex-wrap gap-4 text-sm text-gray-500 dark:text-gray-400 mt-3"
              >
                <div class="flex items-center">
                  <el-rate
                    v-model="product.rating"
                    disabled
                    :max="5"
                    allow-half
                    :colors="['#ffd21e', '#ffd21e', '#ffd21e']"
                    :void-icon="Star"
                    :void-color="'rgba(128,128,128,0.4)'"
                    show-score
                    :decimal-place="1"
                    class="mb-2"
                  />
                  <span class="text-orange-500">{{ product.rating }}</span>
                </div>
                <span class="flex items-center gap-1">
                  <el-icon><ChatDotRound /></el-icon>
                  {{ product.reviewCount }}条评价
                </span>
                <span class="flex items-center gap-1">
                  <el-icon><ShoppingCart /></el-icon>
                  {{ product.salesCount }}已售
                </span>
                <span class="flex items-center gap-1">
                  <el-icon><View /></el-icon>
                  {{ product.viewCount }}浏览
                </span>
              </div>
            </div>

            <!-- 店铺信息卡片 -->
            <div
              class="shop-info bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 mb-6 relative group"
            >
              <!-- 添加店铺标识 -->
              <div
                class="absolute -top-3 left-4 bg-primary-500 text-white px-2 py-1 text-xs rounded"
              >
                店铺
              </div>

              <div class="flex items-center justify-between">
                <div
                  class="flex items-center gap-4 cursor-pointer group"
                  @click="goToShop"
                >
                  <el-avatar
                    :size="48"
                    :src="product.shop.avatar"
                    class="transition-transform group-hover:scale-105"
                  />
                  <div>
                    <div
                      class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-1 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors flex items-center gap-2"
                    >
                      {{ product.shop.name }}
                      <el-icon
                        class="text-sm opacity-0 group-hover:opacity-100 transition-opacity"
                        ><ArrowRight
                      /></el-icon>
                    </div>
                    <div
                      class="flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400"
                    >
                      <span>商品 {{ product.shop.productCount }}</span>
                      <span>关注 {{ product.shop.followers }}</span>
                      <span>好评率 {{ product.shop.positiveRate }}%</span>
                    </div>
                  </div>
                </div>
                <div class="flex items-center gap-3">
                  <el-button
                    type="primary"
                    :plain="!product.shop.isFollowed"
                    @click.stop="handleToggleFollowShop"
                  >
                    {{ product.shop.isFollowed ? "已关注" : "+ 关注店铺" }}
                  </el-button>
                  <el-button
                    type="primary"
                    class="shop-enter-btn"
                    @click="goToShop"
                  >
                    <el-icon class="mr-1"><Shop /></el-icon>
                    进店逛逛
                  </el-button>
                </div>
              </div>
            </div>

            <!-- 快捷操作区 -->
            <div
              class="quick-actions bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 mb-6 flex items-center justify-between"
            >
              <div class="flex items-center gap-4">
                <el-button
                  circle
                  :type="product.isFavorite ? 'danger' : 'default'"
                  @click="handleToggleFavorite"
                >
                  <el-icon><Star :filled="product.isFavorite" /></el-icon>
                </el-button>
                <el-button circle type="primary" @click="handleShare">
                  <el-icon><Share /></el-icon>
                </el-button>
              </div>
              <el-button
                type="success"
                size="large"
                class="contact-service-btn"
                @click="handleContactService"
              >
                <el-icon class="mr-1"><Service /></el-icon>
                联系客服
              </el-button>
            </div>

            <!-- 商品规格 -->
            <div class="specs-section mb-6">
              <div
                v-for="spec in product.specs"
                :key="spec.name"
                class="spec-item mb-4"
              >
                <div class="spec-name text-gray-600 dark:text-gray-300 mb-2">
                  {{ spec.name }}
                </div>
                <div class="spec-values flex flex-wrap gap-2">
                  <div
                    v-for="value in spec.values"
                    :key="value.id"
                    class="spec-value-item"
                    :class="{
                      'is-selected': selectedSpecs[spec.name] === value.id,
                      'is-disabled': !value.available,
                    }"
                    @click="handleSpecSelect(spec.name, value)"
                  >
                    <template v-if="spec.type === 'color'">
                      <div
                        class="color-block w-8 h-8 rounded-full border-2"
                        :style="{ backgroundColor: value.code }"
                      />
                      <span class="text-sm">{{ value.text }}</span>
                    </template>
                    <template v-else>
                      {{ value.text }}
                    </template>
                  </div>
                </div>
              </div>
            </div>

            <!-- 购买数量 -->
            <div class="quantity-section mb-6">
              <div class="text-gray-600 mb-2">购买数量</div>
              <div class="flex items-center">
                <el-input-number
                  v-model="quantity"
                  :min="1"
                  :max="selectedSku ? selectedSku.stock : product.stock"
                  size="large"
                />
                <span class="text-gray-500 ml-2">
                  库存 {{ selectedSku ? selectedSku.stock : product.stock }} 件
                </span>
              </div>
            </div>

            <!-- 服务说明 -->
            <div class="service-section mb-6">
              <div class="text-gray-600 mb-2">服务说明</div>
              <div class="flex flex-wrap gap-4">
                <div
                  v-for="service in product.services"
                  :key="service.id"
                  class="service-item flex items-center text-sm text-gray-500 dark:text-gray-400"
                >
                  <el-icon class="text-primary-500 mr-1">
                    <component :is="service.icon" />
                  </el-icon>
                  <span>{{ service.text }}</span>
                </div>
              </div>
            </div>

            <!-- 购买按钮 -->
            <div class="action-buttons flex gap-4">
              <el-button
                type="primary"
                size="large"
                class="flex-1 h-12 text-lg"
                :disabled="!canBuy"
                @click="handleBuyNow"
              >
                立即购买
              </el-button>
              <el-button
                type="primary"
                plain
                size="large"
                class="flex-1 h-12 text-lg"
                :disabled="!canBuy"
                @click="handleAddToCart"
              >
                加入购物车
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 主要内容区 -->
    <div class="container mx-auto px-4 py-8">
      <div class="flex flex-col lg:flex-row gap-8">
        <!-- 左侧主要内容 -->
        <div class="flex-1">
          <!-- 导航标签 -->
          <el-tabs v-model="activeTab" class="product-tabs">
            <el-tab-pane label="商品详情" name="detail">
              <!-- 商品详情 -->
              <div
                class="product-detail bg-white dark:bg-gray-800 rounded-lg p-6"
              >
                <h2
                  class="text-xl font-bold mb-6 text-gray-900 dark:text-gray-100"
                >
                  商品详情
                </h2>
                <div class="content space-y-6">
                  <div
                    v-for="(section, index) in product.details"
                    :key="index"
                    class="section"
                  >
                    <h3
                      class="text-lg font-medium mb-4 text-gray-800 dark:text-gray-200"
                    >
                      {{ section.title }}
                    </h3>
                    <div
                      class="text-gray-600 dark:text-gray-300 leading-relaxed mb-4"
                    >
                      {{ section.content }}
                    </div>
                    <div
                      v-if="section.images?.length"
                      class="grid grid-cols-2 gap-4"
                    >
                      <el-image
                        v-for="(image, imageIndex) in section.images"
                        :key="imageIndex"
                        :src="image"
                        :preview-src-list="section.images"
                        class="w-full rounded-lg"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>

            <el-tab-pane label="规格参数" name="params">
              <!-- 规格参数 -->
              <div
                class="product-params bg-white dark:bg-gray-800 rounded-lg p-6"
              >
                <h2
                  class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-6"
                >
                  规格参数
                </h2>
                <div class="params-list">
                  <div
                    v-for="group in product.params"
                    :key="group.name"
                    class="param-group mb-6"
                  >
                    <h3
                      class="text-lg font-medium text-gray-800 dark:text-gray-200 mb-4"
                    >
                      {{ group.name }}
                    </h3>
                    <div class="grid grid-cols-2 gap-4">
                      <div
                        v-for="item in group.items"
                        :key="item.name"
                        class="param-item flex border-b dark:border-gray-700 pb-2"
                      >
                        <span
                          class="label w-32 text-gray-500 dark:text-gray-400"
                          >{{ item.name }}</span
                        >
                        <span
                          class="value flex-1 text-gray-900 dark:text-gray-100"
                          >{{ item.value }}</span
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>

            <el-tab-pane label="用户评价" name="reviews">
              <!-- 用户评价 -->
              <div class="reviews bg-white dark:bg-gray-800 rounded-lg p-6">
                <!-- 评分统计 -->
                <div
                  class="rating-stats flex items-center gap-8 mb-8 bg-gray-50 dark:bg-gray-700 p-6 rounded-lg"
                >
                  <div class="overall-rating text-center">
                    <div
                      class="text-3xl text-orange-500 dark:text-orange-400 font-bold mb-2"
                    >
                      {{ product.rating }}
                    </div>
                    <el-rate
                      v-model="product.rating"
                      disabled
                      :max="5"
                      allow-half
                      :colors="['#ffd21e', '#ffd21e', '#ffd21e']"
                      :void-icon="Star"
                      :void-color="'rgba(128,128,128,0.4)'"
                      show-score
                      :decimal-place="1"
                      class="mb-2"
                    />
                    <div class="text-gray-500 dark:text-gray-400 text-sm">
                      {{ product.reviewCount }}条评价
                    </div>
                  </div>
                  <div class="rating-bars flex-1 space-y-3">
                    <div
                      v-for="(stat, index) in product.ratingStats"
                      :key="index"
                      class="rating-bar flex items-center gap-2"
                    >
                      <div
                        class="label w-16 text-sm text-gray-500 dark:text-gray-400"
                      >
                        {{ stat.label }}
                      </div>
                      <div
                        class="bar flex-1 h-2.5 bg-gray-200 dark:bg-gray-600 rounded-full overflow-hidden"
                      >
                        <div
                          class="h-full bg-orange-500 dark:bg-orange-400 rounded-full transition-all duration-300"
                          :style="{ width: `${stat.percentage}%` }"
                        />
                      </div>
                      <div
                        class="count w-16 text-right text-sm text-gray-500 dark:text-gray-400"
                      >
                        {{ stat.count }}
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 评价标签 -->
                <div class="review-tags mb-6">
                  <div class="text-gray-600 dark:text-gray-300 mb-2">
                    评价标签
                  </div>
                  <div class="flex flex-wrap gap-2">
                    <el-tag
                      v-for="tag in product.reviewTags"
                      :key="tag.id"
                      :type="
                        selectedReviewTags.includes(tag.id) ? 'primary' : 'info'
                      "
                      class="cursor-pointer dark:border-gray-600 transition-colors duration-200"
                      @click="handleReviewTagToggle(tag.id)"
                    >
                      {{ tag.text }}({{ tag.count }})
                    </el-tag>
                  </div>
                </div>

                <!-- 评价列表 -->
                <div class="review-list space-y-6">
                  <div
                    v-for="review in product.reviews"
                    :key="review.id"
                    class="review-item border-b dark:border-gray-700 pb-6"
                  >
                    <div
                      class="review-header flex items-center justify-between mb-3"
                    >
                      <div class="user-info flex items-center">
                        <el-avatar :size="40" :src="review.userAvatar" />
                        <div class="ml-3">
                          <div
                            class="font-medium text-gray-900 dark:text-gray-100"
                          >
                            {{ review.userName }}
                          </div>
                          <div class="text-gray-500 dark:text-gray-400 text-sm">
                            {{ review.createTime }}
                          </div>
                        </div>
                      </div>
                      <el-rate
                        v-model="review.rating"
                        disabled
                        :max="5"
                        allow-half
                        :colors="['#ffd21e', '#ffd21e', '#ffd21e']"
                      />
                    </div>
                    <div
                      class="review-content text-gray-600 dark:text-gray-300 mb-4"
                    >
                      {{ review.content }}
                    </div>
                    <div
                      v-if="review.images?.length"
                      class="review-images grid grid-cols-4 gap-2"
                    >
                      <el-image
                        v-for="(image, index) in review.images"
                        :key="index"
                        :src="image"
                        :preview-src-list="review.images"
                        class="w-full aspect-square rounded object-cover"
                      />
                    </div>
                    <div
                      v-if="review.specs?.length"
                      class="review-specs flex flex-wrap gap-2 mt-4"
                    >
                      <el-tag
                        v-for="spec in review.specs"
                        :key="spec.name"
                        size="small"
                        type="info"
                        class="dark:border-gray-600"
                      >
                        {{ spec.name }}: {{ spec.value }}
                      </el-tag>
                    </div>
                    <div
                      v-if="review.reply"
                      class="review-reply bg-gray-50 dark:bg-gray-800 p-4 rounded mt-4 border border-gray-100 dark:border-gray-700"
                    >
                      <div
                        class="text-primary-600 dark:text-primary-400 font-medium mb-2"
                      >
                        商家回复：
                      </div>
                      <div class="text-gray-600 dark:text-gray-300">
                        {{ review.reply }}
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 分页 -->
                <div class="pagination flex justify-center mt-8">
                  <el-pagination
                    v-model:current-page="reviewPage"
                    v-model:page-size="reviewPageSize"
                    :total="reviewTotal"
                    :page-sizes="[10, 20, 30, 40]"
                    layout="total, sizes, prev, pager, next, jumper"
                    class="dark:!text-gray-300"
                    @size-change="handleReviewSizeChange"
                    @current-change="handleReviewPageChange"
                  />
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>

        <!-- 右侧推荐 -->
        <div class="lg:w-80">
          <!-- 相关商品推荐 -->
          <div
            class="related-products bg-white dark:bg-gray-800 rounded-lg p-6"
          >
            <h3 class="text-lg font-bold text-gray-900 dark:text-gray-100 mb-4">
              相关商品
            </h3>
            <div class="space-y-4">
              <div
                v-for="item in product.relatedProducts"
                :key="item.id"
                class="product-item flex items-center cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700/50 rounded p-2"
                @click="handleViewProduct(item)"
              >
                <el-image
                  :src="item.coverImage"
                  :alt="item.name"
                  class="w-20 h-20 rounded object-cover"
                />
                <div class="ml-3 flex-1 min-w-0">
                  <div
                    class="font-medium truncate mb-1 text-gray-900 dark:text-gray-100"
                  >
                    {{ item.name }}
                  </div>
                  <div class="text-sm text-gray-500 dark:text-gray-400 mb-1">
                    <el-rate
                      v-model="item.rating"
                      disabled
                      :max="5"
                      allow-half
                      :colors="['#ffd21e', '#ffd21e', '#ffd21e']"
                      :size="12"
                    />
                  </div>
                  <div class="text-primary-600 dark:text-primary-400">
                    ¥{{ item.price }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import {
  Star,
  Truck,
  Service,
  RefreshRight,
  ShieldCheck,
  ChatDotRound,
  ShoppingCart,
  View,
  Share,
  ArrowRight,
  Shop,
} from "@element-plus/icons-vue";

const route = useRoute();
const router = useRouter();

// 页面数据
const product = ref({
  id: 1,
  name: "贵港特色手工编织包",
  images: [
    "/images/products/bag1.jpg",
    "/images/products/bag2.jpg",
    "/images/products/bag3.jpg",
  ],
  price: 128,
  originalPrice: 168,
  rating: 4.8,
  reviewCount: 235,
  salesCount: 568,
  stock: 999,
  isFavorite: false,
  specs: [
    {
      name: "颜色",
      type: "color",
      values: [
        { id: 1, text: "米白色", code: "#F5F5DC", available: true },
        { id: 2, text: "浅棕色", code: "#D2B48C", available: true },
        { id: 3, text: "深棕色", code: "#8B4513", available: false },
      ],
    },
    {
      name: "尺寸",
      type: "text",
      values: [
        { id: 1, text: "小号", available: true },
        { id: 2, text: "中号", available: true },
        { id: 3, text: "大号", available: false },
      ],
    },
  ],
  services: [
    { id: 1, icon: "Truck", text: "全国包邮" },
    { id: 2, icon: "Service", text: "7天无理由退换" },
    { id: 3, icon: "RefreshRight", text: "48小时发货" },
    { id: 4, icon: "ShieldCheck", text: "正品保障" },
  ],
  details: [
    {
      title: "商品介绍",
      content: "采用传统手工编织工艺，结合现代设计元素，既实用又美观。",
      images: [
        "/images/products/bag-detail1.jpg",
        "/images/products/bag-detail2.jpg",
      ],
    },
  ],
  params: [
    {
      name: "基本信息",
      items: [
        { name: "品牌", value: "贵港手工" },
        { name: "材质", value: "天然草编" },
        { name: "产地", value: "广西贵港" },
        { name: "重量", value: "0.5kg" },
      ],
    },
  ],
  ratingStats: [
    { label: "5星", percentage: 85, count: 200 },
    { label: "4星", percentage: 12, count: 28 },
    { label: "3星", percentage: 2, count: 5 },
    { label: "2星", percentage: 1, count: 1 },
    { label: "1星", percentage: 0, count: 1 },
  ],
  reviewTags: [
    { id: 1, text: "做工精细", count: 156 },
    { id: 2, text: "美观大方", count: 98 },
    { id: 3, text: "实用耐用", count: 76 },
  ],
  reviews: [
    {
      id: 1,
      userAvatar: "/images/avatars/user1.jpg",
      userName: "快乐购物",
      createTime: "2024-03-15 14:30",
      rating: 5,
      content: "包包质量很好，做工精细，很满意的一次购物！",
      images: [
        "/images/reviews/review1-1.jpg",
        "/images/reviews/review1-2.jpg",
      ],
      specs: [
        { name: "颜色", value: "米白色" },
        { name: "尺寸", value: "中号" },
      ],
      reply: "感谢您的好评，欢迎再次购买！",
    },
  ],
  relatedProducts: [
    {
      id: 2,
      name: "贵港特产礼盒",
      coverImage: "/images/products/gift-box.jpg",
      rating: 4.9,
      price: 198,
    },
  ],
  shop: {
    id: 1,
    name: "贵港优选店铺",
    avatar: "/images/shop/avatar.jpg",
    productCount: 128,
    followers: 1000,
    positiveRate: 98,
    isFollowed: false,
  },
});

// 图片预览
const activeImageIndex = ref(0);

// 标签页
const activeTab = ref("detail");

// 评价相关
const reviewPage = ref(1);
const reviewPageSize = ref(10);
const reviewTotal = ref(235);
const selectedReviewTags = ref([]);

// 规格选择
const selectedSpecs = ref({});
const quantity = ref(1);

// 获取选中的SKU
const selectedSku = computed(() => {
  // TODO: 根据选中的规格获取对应的SKU
  return null;
});

// 是否可以购买
const canBuy = computed(() => {
  const allSpecsSelected = product.value.specs.every(
    (spec) => selectedSpecs.value[spec.name],
  );
  const hasStock = selectedSku.value
    ? selectedSku.value.stock > 0
    : product.value.stock > 0;
  return allSpecsSelected && hasStock;
});

// 处理规格选择
const handleSpecSelect = (specName, value) => {
  if (!value.available) return;
  selectedSpecs.value[specName] = value.id;
};

// 处理收藏切换
const handleToggleFavorite = async () => {
  try {
    // TODO: 调用收藏/取消收藏API
    product.value.isFavorite = !product.value.isFavorite;
    ElMessage.success(product.value.isFavorite ? "收藏成功" : "已取消收藏");
  } catch (error) {
    ElMessage.error("操作失败，请重试");
  }
};

// 立即购买
const handleBuyNow = () => {
  // TODO: 实现立即购买逻辑
  router.push("/order/confirm");
};

// 加入购物车
const handleAddToCart = () => {
  // TODO: 实现加入购物车逻辑
  ElMessage.success("已加入购物车");
};

// 查看相关商品
const handleViewProduct = (item) => {
  router.push(`/product/${item.id}`);
};

// 处理评价标签切换
const handleReviewTagToggle = (tagId) => {
  const index = selectedReviewTags.value.indexOf(tagId);
  if (index > -1) {
    selectedReviewTags.value.splice(index, 1);
  } else {
    selectedReviewTags.value.push(tagId);
  }
  fetchReviews();
};

// 处理评价分页
const handleReviewSizeChange = (size) => {
  reviewPageSize.value = size;
  fetchReviews();
};

const handleReviewPageChange = (page) => {
  reviewPage.value = page;
  fetchReviews();
};

// 获取评价列表
const fetchReviews = async () => {
  try {
    // TODO: 调用获取评价列表API
  } catch (error) {
    ElMessage.error("获取评价列表失败");
  }
};

// 获取商品详情
const fetchProductDetail = async () => {
  try {
    // TODO: 调用获取商品详情API
    // const { data } = await getProductDetail(route.params.id)
    // product.value = data
  } catch (error) {
    ElMessage.error("获取商品详情失败");
  }
};

// 关注/取消关注店铺
const handleToggleFollowShop = async () => {
  try {
    // TODO: 调用关注/取消关注店铺API
    product.value.shop.isFollowed = !product.value.shop.isFollowed;
    ElMessage.success(
      product.value.shop.isFollowed ? "关注店铺成功" : "已取消关注店铺",
    );
  } catch (error) {
    ElMessage.error("操作失败，请重试");
  }
};

// 跳转到店铺页面
const goToShop = () => {
  router.push(`/shop/${product.value.shop.id}`);
};

onMounted(() => {
  fetchProductDetail();
});
</script>

<style lang="scss" scoped>
.product-detail-page {
  .product-tabs {
    :deep(.el-tabs__header) {
      @apply mb-6;
    }

    :deep(.el-tabs__nav-wrap::after) {
      @apply dark:bg-gray-700;
    }

    :deep(.el-tabs__item) {
      @apply dark:text-gray-400;
      &.is-active {
        @apply dark:text-primary-400;
      }
    }
  }

  .spec-value-item {
    @apply border-gray-200 dark:border-gray-700 dark:text-gray-300;

    &:hover {
      @apply border-primary-500 dark:border-primary-400;
    }

    &.is-selected {
      @apply border-primary-500 dark:border-primary-400 bg-primary-50 dark:bg-primary-900/20 text-primary-600 dark:text-primary-400;
    }

    &.is-disabled {
      @apply dark:text-gray-500;
    }
  }

  .rating-stats {
    @apply transition-colors duration-200;

    .rating-bar {
      .bar {
        @apply overflow-hidden transition-all duration-300;
      }
    }
  }

  .review-tags {
    :deep(.el-tag) {
      &.el-tag--info {
        @apply dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300;

        &:hover {
          @apply dark:bg-gray-600;
        }
      }

      &.el-tag--primary {
        @apply dark:bg-primary-900/50 dark:border-primary-400 dark:text-primary-400;

        &:hover {
          @apply dark:bg-primary-800/50;
        }
      }
    }
  }

  :deep(.review-item) {
    .review-reply {
      @apply bg-gray-50 dark:bg-gray-800 p-4 rounded mt-4 border border-gray-100 dark:border-gray-700;
      transition: all 0.2s ease-in-out;

      .text-primary-600 {
        @apply dark:text-primary-400;
      }

      .text-gray-600 {
        @apply dark:text-gray-300;
      }

      &:hover {
        @apply bg-gray-100 dark:bg-gray-700;
      }
    }
  }

  // 确保评分组件在深色模式下正确显示
  :deep(.el-rate) {
    .el-rate__item {
      .el-rate__icon {
        @apply dark:text-gray-600;

        &.hover,
        &.el-rate__decimal {
          @apply dark:text-yellow-400;
        }
      }
    }
  }

  // 确保标签在深色模式下正确显示
  :deep(.el-tag) {
    &.el-tag--info {
      @apply dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300;

      &:hover {
        @apply dark:bg-gray-600;
      }
    }
  }

  // 确保分页在深色模式下正确显示
  :deep(.el-pagination) {
    @apply dark:text-gray-300;

    .btn-prev,
    .btn-next,
    .el-pager li {
      @apply dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600;

      &:hover:not(.disabled) {
        @apply dark:bg-gray-600;
      }

      &.is-active {
        @apply dark:bg-primary-600 dark:text-white;
      }
    }
  }
}

.contact-service-btn {
  height: 44px;
  padding: 0 24px;
  font-size: 16px;
}

.spec-value-item {
  @apply px-4 py-2 border rounded-lg cursor-pointer transition-colors
         hover:border-primary-500 hover:text-primary-500;
}

.spec-value-item.is-selected {
  @apply border-primary-500 text-primary-500 bg-primary-50;
}

.spec-value-item.is-disabled {
  @apply cursor-not-allowed opacity-50 hover:border-gray-300 hover:text-gray-500;
}

.service-item {
  @apply flex items-center gap-2 px-3 py-2 bg-gray-50 rounded-lg;
}

/* 动画效果 */
.action-buttons .el-button {
  transition: transform 0.2s;
}

.action-buttons .el-button:hover {
  transform: translateY(-2px);
}

.quick-actions .el-button {
  transition: all 0.3s;
}

.quick-actions .el-button:hover {
  transform: scale(1.1);
}
</style>
